<script setup lang="ts">
import { useRouter } from 'vue-router'
import { storeToRefs } from "pinia"
import { useCounterStore, useAddressStore } from "@/stores/counter"
import { ref, computed } from "vue"
const router = useRouter();
const store = useCounterStore();
const { shopcartList } = storeToRefs(store);
const showList = computed(() => {
  return shopcartList.value.filter(el => el.isSelect);
});
const addressStore = useAddressStore();
const { nowSelectAddress } = storeToRefs(addressStore);
console.log(nowSelectAddress);

//标签数据
const allPrice = computed(() => {
  let num = 0;
  showList.value.forEach(el => {
    num += el.count * (Number.parseFloat(el.salesPrice) / 100);
  })
  return num;
})

const content = ref<string>();
const contentInput = (e: Event) => {
  let target = e.target as HTMLDivElement;
  content.value = target.textContent || "";
}
const phone = ref<string>();
const phoneInput = (e: Event) => {
  let target = e.target as HTMLDivElement;
  phone.value = target.textContent || "";
}
</script>
<template>
  <div class="fixed-zbest pay">
    <header class="header">
      <van-icon @click.stop="router.go(-1)" class="header-icon" name="arrow-left" />
      <div class="header-text">提交订单</div>
    </header>
    <div class="content">
      <div class="address" @click.stop="router.push('/address')">
        <div class="img-box">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="33px" height="37px">
            <image x="0px" y="0px" width="33px" height="37px"
              xlink:href="data:img/png;base64,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" />
          </svg>
        </div>
        <div class="address-text">
          <div class="address-text-message" v-if="!nowSelectAddress?.id">添加收货地址</div>
          <div v-else class="address-detail">
            <div class="my-text address-detail-first">
              <div class="name">{{ nowSelectAddress?.name }}</div>
              <div class="tel">{{ nowSelectAddress?.tel }}</div>
              <div v-show="nowSelectAddress.isDefault" class="isDefault">默认</div>
            </div>
            <div class="my-text address-detail-sec">{{ nowSelectAddress?.address }}</div>
          </div>
        </div>
        <van-icon class="icon" name="arrow" />
      </div>
      <div class="shop-list">
        <div class="shop-item" v-for="(item, index) in showList" :key="index">
          <div class="item-info">
            <div class="left">
              <img :src="item.image" alt="">
            </div>
            <div class="right">
              <div class="my-text title">{{ item.fullName }}</div>
              <div class="tags">
                <div class="tag" v-for="(tag, index) in item.tags" :key="index">{{ tag }}<span
                    v-if="index != item.tags.length - 1"> |</span></div>
              </div>
              <div class="price"><span>&yen;</span>{{ Number.parseFloat(item.salesPrice) / 100 }}</div>
              <div class="count"><van-icon class="icon" name="cross" />{{ item.count }}</div>
            </div>
          </div>
          <div class="item-tag">
            <div class="item-tag-text">服务</div>
            <div class="promotionalSign" v-for="(text, index) in item.promotionalSign" :key="index">{{ text }}</div>
          </div>
        </div>
      </div>
      <div class="voucher">
        <div></div>
        <div class="voucher-text">暂时没有可用的代金券<van-icon class="icon" name="arrow" /></div>
      </div>
      <div class="price-detail">
        <div class="price-o"><span>&yen;</span>{{ allPrice }}</div>
        <div>+<span>&yen;</span>0</div>
        <div>-<span>&yen;</span>0</div>
        <div>-<span>&yen;</span>0</div>
      </div>
      <div class="message">
        <div>
          <div class="text">买家留言</div>
          <div class="message-input" :class="{ first: !content }" contenteditable="true" @input="contentInput">{{ content
          }}
          </div>
        </div>
        <div>
          <div class="text">代理人信息</div>
          <div class="message-input" :class="{ sec: !phone }" contenteditable="true" @input="phoneInput">{{ phone }}</div>
        </div>
      </div>
      <footer class="footer">
        <div class="all-price">
          <div>合计:</div>
          <div class="price"><span>&yen;</span>{{ allPrice }}</div>
        </div>
        <div class="btn" @click.stop="router.replace('/paydetail')">去支付</div>
      </footer>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.pay {
  width: 100%;
  background-color: var(--bgc-gray);
  overflow: scroll;
  box-sizing: border-box;
  padding-bottom: .5rem;

  &::-webkit-scrollbar {
    display: none;
  }

  .header {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 10;
    background-color: var(--bgc-white);
    width: 100%;
    height: .5rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 .15rem;

    .header-icon {
      font-size: .2rem;
      opacity: .8;
    }

    .header-text {
      flex-grow: 1;
      text-align: center;
      font-weight: bold;
      opacity: .8;
    }
  }

  .content {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: .1rem;

    &::before {
      position: absolute;
      left: 0;
      top: 0;
      content: '';
      width: 100%;
      height: 2.26rem;
      background-image: linear-gradient(to bottom, rgba(245, 41, 16, 1), rgba(245, 41, 16, 0));
      z-index: -1;
    }

    >div {
      margin-bottom: .1rem;
    }

    .address {
      width: 100%;
      height: .7rem;
      background-color: var(--bgc-white);
      border-radius: .1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 0 .15rem;

      .img-box {
        width: .33rem;
        min-width: .33rem;
        aspect-ratio: 33/37;
      }

      .address-text {
        flex-grow: 1;
        height: 100%;
        margin-left: .15rem;
        box-sizing: border-box;
        .address-text-message{
          line-height: .7rem;
          box-sizing: border-box;
        }
        .address-detail{
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: flex-start;
          flex-direction: column;
          color: var(--text-gray);

          .address-detail-first{
            display: flex;
            .name{
              color: var(--text-black);
            }
            .tel{
              margin-left: .05rem;
            }
            .isDefault{
              font-size: .12rem;
              background-color: var(--bgc-red);
              color: var(--text-white);
              padding: 0 .02rem;
              height: .16rem;
              line-height: .16rem;
              border-radius: .02rem;
              margin-left: .02rem;
            }
          }
          .address-detail-sec{
            font-size: .13rem;
          }
        }
      }

      .icon {
        font-size: .2rem;
        color: var(--text-gray);
      }
    }

    .shop-list {
      width: 100%;

      .shop-item {
        width: 100%;
        height: 1.38rem;
        border-radius: .1rem;
        background-color: var(--bgc-white);
        box-sizing: border-box;
        padding: .1rem;
        margin-bottom: .1rem;

        .item-info {
          display: flex;
          justify-content: space-between;

          .left {
            width: .6rem;
            min-width: .6rem;
            aspect-ratio: 60/70;
            border-radius: .06rem;
            overflow: hidden;
          }

          .right {
            position: relative;
            flex-grow: 1;
            margin-left: .1rem;

            .title {
              width: calc(100% - .3rem);
              font-size: .15rem;
              margin-bottom: .05rem;
            }

            .tags {
              display: flex;
              flex-wrap: wrap;
              margin-bottom: .1rem;

              .tag {
                color: var(--text-gray);
                margin-right: .05rem;
                font-size: .14rem;
              }
            }

            .price {
              font-size: .18rem;
              color: var(--text-red);
              font-weight: bold;

              >span {
                font-size: .14rem;
              }
            }

            .count {
              position: absolute;
              right: 0.05rem;
              top: 0;
              color: var(--text-red);

              .icon {
                font-size: .15rem;
              }
            }
          }
        }

        .item-tag {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          font-size: .14rem;
          margin-top: .1rem;

          .promotionalSign {
            box-sizing: border-box;
            padding: 0 .02rem;
            border-radius: .02rem;
            color: var(--text-red);
            margin-left: .05rem;
            border: .01rem solid var(--text-red);
          }
        }
      }
    }

    .voucher {
      width: 100%;
      height: .8rem;
      border-radius: .1rem;
      background-color: var(--bgc-white);
      box-sizing: border-box;
      padding: .1rem;
      display: flex;
      flex-direction: column;
      justify-content: end;

      .voucher-text {
        text-align: right;
        margin-bottom: .1rem;
        color: var(--text-gray);

        .icon {
          font-size: .15rem;
          color: var(--text-gray);
        }
      }
    }

    .price-detail {
      width: 100%;
      box-sizing: border-box;
      padding: .1rem;
      background-color: var(--bgc-white);
      border-radius: .1rem;

      >div {
        font-size: .15rem;
        text-align: right;
        color: var(--text-red-deep);
        margin-bottom: .1rem;
      }

      .price-o {
        font-size: .16rem;
        font-weight: bold;
      }
    }

    .message {
      width: 100%;
      background-color: var(--bgc-white);
      border-radius: .1rem;
      box-sizing: border-box;
      padding: .1rem;
      padding-bottom: 0;

      >div {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: .1rem;
        color: var(--text-gray);

        .text {
          line-height: .28rem;
        }

        .message-input {
          position: relative;
          width: 2.5rem;
          min-height: .31rem;
          outline: none;
          border: none;
          box-sizing: border-box;
          padding: .05rem;
          overflow: hidden;
          font-size: .14rem;
        }

        .first {
          &::before {
            position: absolute;
            left: 0.02rem;
            top: 0.05rem;
            content: '填写你要备注的信息,限100字以内';
          }
        }

        .sec {
          &::before {
            position: absolute;
            left: 0.02rem;
            top: 0.05rem;
            content: '填写代理人的手机号,可不填';
          }
        }
      }
    }

    .footer {
      width: 100%;
      height: .5rem;
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 10;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 0 .15rem;
      padding-right: 0;
      background-color: var(--bgc-white);

      .all-price {
        color: var(--text-red);
        display: flex;
        align-items: center;
        font-size: .18rem;

        .price {
          margin-left: .05rem;
          font-weight: bold;

          >span {
            margin-right: .02rem;
          }
        }
      }

      .btn {
        width: 1.2rem;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--bgc-red);
        color: var(--text-white);
        border-radius: .1rem 0 0 0;
      }
    }
  }
}
</style>